<template>
  <div class="main">
    <div class="navbox">
      <div class="gohome" @click="goHome()">回首页</div>
      <div class="addwj" @click="addWj()">
        <i class="glyphicon glyphicon-plus"></i>
        <span>新建文集</span>
      </div>
      <input type="text" placeholder="请输入文集名..." v-model="wjText" v-show="showWj">
      <div class="btngroup" v-show="showWj">
        <div class="sure cancel" @click="sureaddWj">提交</div>
        <div class="cancel" @click="showWj = false; wjText = '';">取消</div>
      </div>
      <div class="rjb" :class="wjIndex === index ? 'rjb-active' : ''" v-for="(val, index) in wjArr" :key="index" @click="rjbClick(val, index)">
        <span>{{ val.name }}</span>
      </div>
      <div class="setbtn"> <i class="glyphicon glyphicon-align-justify"></i>设置</div>
      <div class="wtbtn"><i class="glyphicon glyphicon-question-sign"></i>遇到问题</div>
    </div>
    <div class="addarticle">
      <div class="addwz" @click="addArt()">
        <i class="glyphicon glyphicon-plus"></i>
        <span>新建文章</span>
      </div>
      <div class="list">
        <div class="item" :class="artIndex === index ? 'item-active' : ''" v-for="(val, index) in artArr" :key="index" @click="artClick(val, index)">
          <span>{{ val.time }}</span>
          <span>字数：{{ val.num }}</span>
          <i class="glyphicon glyphicon-file"></i>
        </div>
      </div>
    </div>
    <div class="articlebox">
      <div class="title">2021-09-28</div>
      <div class="ybc">已保存</div>
      <div class="editbox">
        <div id="editor" style="width: 100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Wz',
  data() {
    return {
      wjArr: [{ name: '日记本' }, { name: '随笔' }],
      showWj: true,
      wjText: '',
      wjIndex: 0,
      artArr: [],
      artIndex: 0
    };
  },
  methods: {
    //跳转
    goHome() {
      location.href = 'https://www.jianshu.com';
    },
    //新建文集
    addWj() {
      this.showWj = true;
    },
    //提交
    sureaddWj() {
      if (this.wjText) {
        this.wjArr.push({ name: this.wjText });
      }
    },
    //新建文章
    addArt() {
      this.artArr.push({ time: '', num: 0 });
    },
    rjbClick(val, index) {
      this.wjIndex = index;
    },
    artClick(val, index) {
      this.artIndex = index;
    }
  },
  created() {
    setTimeout(() => {
      var E = window.wangEditor;
      var editor = new E(document.getElementById('editor'));
      editor.create();
    }, 1000);
  }
};
</script>

<style lang="less">
@import "/src/pages/Acrticle/css/Acrticle.less";
@import "/src/pages/Acrticle/css/reset.less";
</style>
